/*
  学习目标：实现子传父功能
  1. 父组件定义一个回调函数
  2. 通过props将回调函数传给子组件
  3. 子组件内通过props调用父组件传来的函数
 
*/

import React from 'react';

export default class Parent extends React.Component {
  state = {
    money: 1000,
  };

  handleMakeMoney = () => {
    this.setState({
      money: 1000 + this.state.money,
    });
  };

  render() {
    const { money } = this.state;
    return (
      <div>
        <h1>{money}</h1>
        <button onClick={this.handleMakeMoney}>爸爸开始赚钱了</button>

        <Child
          // 2. 通过props将回调函数传给子组件
          handleCost={this.handleCost}
          money={money}
        ></Child>
      </div>
    );
  }

  // 💥 利用props可以传递函数
  // 1. 父组件定义一个回调函数
  handleCost = (num) => {
    console.log(' num ----->  ', num);
    this.setState({ money: this.state.money - num });
  };
}

class Child extends React.Component {
  render() {
    // 3. 子组件内通过props调用父组件传来的函数
    const { money, handleCost } = this.props;

    return (
      <div>
        <h1>爸爸给我钱了： {money}</h1>
        <button onClick={() => handleCost(500)}>点我花钱</button>
      </div>
    );
  }
}

// 1. 父组件
// 2.
